<template>
	<div class="course-list-page">
		<layout-base :loading="showLoading">
			<crumb title="课堂视频" :routes="crumb"></crumb>
			<pannel>
				<router-link class="iconfont btn gradient-primary mb-20" to="/course/edit">&#xe6e0; 上传课程视频</router-link>
				<select class="btn ml-20">
					<option>所有课程</option>
					<option>Photoshop</option>
					<option>Illustrator</option>
				</select>
				<select class="btn ml-20">
					<option>所有章节</option>
				</select>
				<z-table>
					<thead>
						<tr>
							<th>章节</th>
							<th>所属课程</th>
							<th>创建时间</th>
							<th>在学人数</th>
							<th width="140" style="text-align: right;">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(v,i) in course" :key="i">
							<td>第一章 基础操作 第一节 文件操作</td>
							<td><div class="line-1">{{v.name}}</div></td>
							<td>{{v.createTime}}</td>
							<td>{{v.learn}}</td>
							<td>
								<div class="flex jc-end">
									<router-link class="iconfont status bg-info mr-10 pointer" title="编辑" to="/course/edit">&#xe6e5;</router-link>
									<span class="iconfont status bg-danger pointer" title="删除" @click="onDel(i)">&#xe6f7;</span>
								</div>
							</td>
						</tr>
					</tbody>
				</z-table>
				<pages :total="50" @change="onPageChange"></pages>
			</pannel>
		</layout-base>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				showLoading: false,
				//面包屑导航
				crumb:[
					{label:'我的课程'}
				],
				//课程列表
				course:[
					{name:'Photoshop', createTime:'2019-06-30', learn:23,},
					{name:'Illustrator', createTime:'2019-06-30', learn:23,}
				]
			}
		},
		methods:{
			//分页
			onPageChange(e){
				console.log(e)
				this.showLoading = true
				setTimeout(()=>{
					this.showLoading = false
				}, 1000)
			},
			onDel(i){
				this.$Confirm({
					title: `确认删除 [${this.course[i].name}] 课程吗`,
					content: '课程将被删除且无法恢复，请谨慎操作！',
					onConfirm(){
						console.log(i)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.course-list-page{
	height: 100%;
}
</style>
